<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="帐号管理" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="list">
      <view class="list-item" v-for="item in platformList" :key="item.id">
        <view class="">
          <view class="role">{{ item.roleNames }}</view>
          <view class="name">{{ item.userName }}</view>
        </view>
        <view class="action" @click.stop="handleDelete(item.id)">
          <u-icon name="close" color="rgba(0,0,0,0.5)" size="24rpx"></u-icon>
        </view>
      </view>
    </view>
    <view v-if="platformList.length == 0" class="a-empty"><a-empty></a-empty></view>
    <view class="footer-primary-btn" @click="jumpTo('/other/platform/platformEdit')">新增帐号</view>
  </view>
</template>

<script>
import { listPlatform, delPlatform } from '@/api/index'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 50,
      },
      platformList: [],
    }
  },
  onShow() {
    this.search()
  },
  methods: {
    getList() {
      uni.showLoading({ mask: true })
      listPlatform({...this.page}).then(response => {
        uni.hideLoading()
        this.platformList = [...this.platformList, ...response.rows];
        this.total = response.total;
      });
    },
    search() {
      this.page.pageNum = 1
      this.platformList = []
      this.getList()
    },
    handleDelete(id) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '删除后不可恢复，是否确认删除？',
        success: async function (res) {
          if (res.confirm) {
            await delPlatform(id)
            uni.showToast({
              icon: 'none',
              title: '删除成功',
            })
            that.search();
          }
        }
      });
    },
  },
  onReachBottom() {
    if(this.page.pageNum * this.page.pageSize < this.total) {
      this.page.pageNum++
      this.getList()
    }
  },
}
</script>

<style lang="less" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  background-repeat: no-repeat;
  background-size: 750rpx 348rpx;
  padding-bottom: 180rpx;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    margin-bottom: 32rpx;
  }
  .list {
    width: 686rpx;
    margin: 0 auto;
    .list-item {
      margin-bottom: 32rpx;
      width: 686rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
      border-radius: 16rpx;
      padding: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .role {
        font-family: PingFangSC, PingFang SC;
        font-size: 28rpx;
        color: rgba(0,0,0,0.85);
        margin-bottom: 16rpx;
      }
      .name {
        font-family: PingFangSC, PingFang SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.5);
      }
      .action {
        font-family: PingFangSC, PingFang SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.5);
      }
    }
  }
}
</style>
